<template>
    <el-table
      class="table"
      header-row-class-name="table-list-header"
      row-class-name="table-list-row"
      :data="tableData"
      @selection-change="handleSelectionChange"
      >
      <!-- 遍历 columns -->
      <template v-for="(item, index) in tableColumns">
        <!-- 选择框 -->
        <el-table-column
          v-if="item.selection"
          type="selection"
          width="50"
          fixed="left"
          align="center"
          :key="index"></el-table-column>
        <!-- 序号 -->
        <el-table-column
          v-else-if="item.index"
          type="index"
          width="100"
          fixed="left"
          label="序号"
          :index="item.indexMethod"
          :key="index"></el-table-column>
        <!-- 自定义内容 -->
        <slot
          v-else-if="item.slot"
          show-overflow-tooltip
          :name="item.slot"
          :fixed="item.fixed"
          :height="item.height"></slot>
        <!-- 常规字段 -->
        <el-table-column
          v-else
          show-overflow-tooltip
           v-bind="item"
          :min-width="item.minWidth"
          :key="index"></el-table-column>
      </template>
    </el-table>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  props:{
   tableData:{
     type:Array,
     defalut:()=>{
       return []
     }
   },
   tableColumns:{
     type:Array,
     defalut:()=>{
       return []
     }
   }
  },
  watch: {
   
  },
  created() {
    
  },
  methods: {
    handleSelectionChange(v){
      this.$emit('handleSelectionChange', v)
    }
  }
}
</script>

<style lang="scss" scoped>
  .table{
    width: 99%;
    margin: 20px auto 0;
    max-height: calc(100vh  - 120px)
  }
  .table::-webkit-scrollbar{
    width: 1px;
  }
</style>
